<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // vlc 播放器
    class VlcPlayer {
        play(fileName) {
            console.log('Playing vlc file. Name:' + fileName)
        }
    }

    // mp4 播放器
    class Mp4Player {
        play(fileName) {
            console.log('Playing mp4 file. Name:' + fileName)
        }
    }

    // 媒体适配器
    class MediaAdapter {
        constructor(audioType) {
            switch (audioType) {
                case 'vlc':
                    MediaAdapter.advancedMusicPlayer = new VlcPlayer()
                    break
                case 'mp4':
                    MediaAdapter.advancedMusicPlayer = new Mp4Player()
                    break
            }
        }

        play(audioType, fileName) {
            switch (audioType) {
                case 'vlc':
                    MediaAdapter.advancedMusicPlayer.play(fileName)
                    break
                case 'mp4':
                    MediaAdapter.advancedMusicPlayer.play(fileName)
                    break
            }
        }
    }

    // 媒体播放器
    class AudioPlayer {
        play(audioType, fileName) {
            switch (audioType) {
                case 'vlc':
                case 'mp4':
                    AudioPlayer.mediaAdapter = new MediaAdapter(audioType)
                    AudioPlayer.mediaAdapter.play(audioType, fileName)
                    break
                default:
                    console.log("Invalid media. " +
                        audioType + " format not supported");
                    break;
            }
        }
    }

    const audioPlayer = new AudioPlayer()

    audioPlayer.play('mp3', '遇见.mp3')
    audioPlayer.play('mp4', '遇见.mp4')
    audioPlayer.play('vlc', '遇见.vlc')
</script>
</body>
</html>
